import React, { PureComponent } from 'react';
import { Table, Card, Select, Input, Form, Button, Popconfirm } from "antd";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { getAllJob, getDeposits, refundDeposit } from '@/services/deposit';
// import { getAuthority } from '@/utils/authority'

import moment from 'moment';


const dataSource = [
  {
    key: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号"
  },
  {
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号2"
  }
];


@Form.create()

class Deposit extends PureComponent {
  state = {
    tableLoading: false,
    jobs: [],
    deposits: [],
    total: 0,
    page: 1,
    size: 10,

  };
  componentDidMount() {
    this.getAllJob()
    this.getDeposits()
  }
  getDeposits = async () => {
    const { page, size } = this.state
    const { getFieldsValue } = this.props.form
    await this.setState({ tableLoading: true })
    const body = {
      page,
      size,
      ...getFieldsValue()
    }
    const res = await getDeposits(body)
    this.setState({
      tableLoading: false,
      deposits: res?.data?.content || [],
      total: res?.data?.totalElements || 0
    })

  }

  getAllJob = async () => {
    const res = await getAllJob()
    this.setState({ jobs: res?.data || [] })
  }

  handlePageChange = async page => {
    await this.setState({ page });
    this.getDeposits()
  };

  handlePageSizeChange = async (page, size) => {
    await this.setState({ page: 1, size });
    this.getDeposits()
  };

  handleSearch = async e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        await this.setState({ page: 1 })
        this.getDeposits()
      }
    });
  }

  refundDeposit = async zbDepositId => {
    await refundDeposit(zbDepositId)
    this.getDeposits()
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { jobs, deposits, total, page, size, tableLoading } = this.state;
    const columns = [
      {
        title: "姓名",
        dataIndex: "name"
      },
      {
        title: "手机号码",
        dataIndex: "mobile"
      },
      {
        title: "押金金额",
        dataIndex: "depositAmount"
      },
      {
        title: "缴纳时间",
        dataIndex: "paymentTime",
        render: paymentTime => paymentTime ? moment(paymentTime).format('YYYY-MM-DD') : '-'
      },
      {
        title: "所属任务",
        dataIndex: "jobTitle",
        // render: (jobTitle, record) => <a>{jobTitle}</a>
      },
      {
        title: "押金状态",
        dataIndex: "depositStatusDesc"
      },
      {
        title: "操作",
        render: (record) => {
          // return getAuthority().includes('RYHR_ADMIN') && record.depositStatus !== 'REFUNDED' ? <a>退款</a> : '-'
          return record.depositStatus !== 'REFUNDED' ? <Popconfirm
            placement="topRight"
            title="确定退款？"
            onConfirm={() => this.refundDeposit(record.zbDepositId)}
          >
            <a>退款</a>
          </Popconfirm> : '-'
        }
      }
    ];
    const pagination = {
      total,
      current: page,
      pageSize: size,
      showTotal: count => `总共 ${count} 条`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20'],
      onChange: this.handlePageChange,
      onShowSizeChange: this.handlePageSizeChange,
    };
    return (
      <PageHeaderWrapper>
        <Card className="marginB24">
          <Form layout="inline" onSubmit={this.handleSearch}>
            <Form.Item>
              {getFieldDecorator('search')(
                <Input
                  allowClear
                  placeholder="姓名/手机号码"
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('jobId')(
                <Select
                  showSearch
                  allowClear
                  optionFilterProp="children"
                  style={{ width: 150 }}
                  placeholder="全部任务"
                >
                  {jobs.map(item => (
                    <Option key={item.id} value={item.id}>
                      {item.title}
                    </Option>
                  ))}
                </Select>
              )}
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                搜索
            </Button>
            </Form.Item>
          </Form>
        </Card>
        <Table
          dataSource={deposits}
          rowKey="zbDepositId"
          columns={columns}
          className="wrapperClass"
          pagination={pagination}
          loading={tableLoading}
        />
      </PageHeaderWrapper>
    );

  }
}


export default Deposit;
